// 搜索接口
// https://netease.bluej.cn/search?keywords=关键词

let $ = function(ele){
	let item = document.querySelectorAll("ele")
	return item.length===1?item[0]:item;
}

// let btn_info = $(".btn-info")
let btn_info = document.querySelector(".btn-info")
let tbody = document.querySelector(".table tbody")
// let table = document.querySelector(".table")
btn_info.addEventListener("click",function(){
	let kwords = keywords.value;
	myAjax(kwords,function(res){
		// console.log(JSON.parse(xhr.response))
		// 定义模板
		let template = function(ele) {
			return `
				<tr>
				  <td data-id=${ele.id}>${ele.name}${ele.alias[0]?'-'+ele.alias[0]:''}</td>
				  <td>${ele.artists.map(function(el){
					  return el.name;
				  }).join("/")}</td>
				  <td>《${ele.album.name}》</td>
				  <td>${formatDuring(ele.duration)}</td>
				</tr>
				  `;
		}
		// let musicList = res.result.songs;
		// console.log(musicList)
		let str = '';
		res.result.songs.forEach(function(el){
			str += template(el);
			// console.log(str)
			tbody.innerHTML = str;
		})
		
		
	});
})

// 
function formatDuring(mss) {
		    var days = parseInt(mss / (1000 * 60 * 60 * 24));
		    var hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
		    var minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
		    var seconds = parseInt((mss % (1000 * 60)) / 1000);
		    // return days + " 天 " + hours + " 小时 " + minutes + " 分钟 " + seconds + " 秒 ";
		    seconds = seconds >=10?seconds:seconds="0"+seconds;
			return minutes + " : " + seconds;
		}
// 
tbody.addEventListener("click",function(e){
	let songid = e.target.getAttribute("data-id");
	if(songid){
		player.src = `https://music.163.com/song/media/outer/url?id=${songid}.mp3`;
		// 体验优化,赋值播放地址后,自动播放
		// 注意:不要尝试,用户首次打开页面,自动播放歌曲
		// 谷歌浏览器,强调用户交互,因此不保证一定能自动播放
		player.play().catch(function(){
			alert('无法播放,正在争取版权')
		})
	}
})

let offset = 0;
function myAjax(keys,callback){
	let xhr = new XMLHttpRequest();
	let reach_url = "https://netease.bluej.cn/search?keywords="+keys+"&limit=10&offset="+offset;
	xhr.open("GET",reach_url)
	xhr.send()
	xhr.onreadystatechange = function(){
		if(xhr.status == 200 && xhr.readyState ==4){
			try{
				// console.log(xhr.response)
				// console.log(JSON.parse(xhr.response))
				typeof callback=="function" && callback(JSON.parse(xhr.response))
			}catch(e){
				//TODO handle the exception
			}
		}
	}
}

// 下一页
let next = document.querySelector("#next")
next.addEventListener("click",function(){
	offset++;
	console.log(offset)
	let kwords = keywords.value;
	myAjax(kwords,function(res){
		// console.log(JSON.parse(xhr.response))
		// 定义模板
		let template = function(ele) {
			return `
				<tr>
				  <td data-id=${ele.id}>${ele.name}${ele.alias[0]?'-'+ele.alias[0]:''}</td>
				  <td>${ele.artists.map(function(el){
					  return el.name;
				  }).join("/")}</td>
				  <td>《${ele.album.name}》</td>
				  <td>${formatDuring(ele.duration)}</td>
				</tr>
				  `;
		}
		// let musicList = res.result.songs;
		// console.log(musicList)
		let str = '';
		res.result.songs.forEach(function(el){
			str += template(el);
			// console.log(str)
			tbody.innerHTML = str;
		})
	});
})


// 上一页
let prev = document.querySelector("#prev")
prev.addEventListener("click",function(){
	offset--;
	if(offset<0){
		offset=0;
	}
	console.log(offset)
	let kwords = keywords.value;
	myAjax(kwords,function(res){
		// console.log(JSON.parse(xhr.response))
		// 定义模板
		let template = function(ele) {
			return `
				<tr>
				  <td data-id=${ele.id}>${ele.name}${ele.alias[0]?'-'+ele.alias[0]:''}</td>
				  <td>${ele.artists.map(function(el){
					  return el.name;
				  }).join("/")}</td>
				  <td>《${ele.album.name}》</td>
				  <td>${formatDuring(ele.duration)}</td>
				</tr>
				  `;
		}
		// let musicList = res.result.songs;
		// console.log(musicList)
		let str = '';
		res.result.songs.forEach(function(el){
			str += template(el);
			// console.log(str)
			tbody.innerHTML = str;
		})
	});
})
//播放链接
// https://music.163.com/song/media/outer/url?id=id.mp3